<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF9E5D"></u-tabs>
		<view class="foot_line"></view>
		<swiper :duration="1000" :style="{height:swiperHeight+'px'}" @change="swiperChange" :current="current">
			<swiper-item>
				<scroll-view scroll-y="true" class="foot_scroll">
					<view class="workeritem">
						<image src="/static/timg2.jpg"></image>
						<view class="workitem-right">
							<view class="workname-info">
								<text class="texts">姓名：你猜</text>
								<view class="bzj-tag">
									<text>保证金1000元</text>
								</view>
							</view>
							<view class="workertypes">
								<text class="texts">擅长：砸墙</text>
							</view>
							<view class="workerprice-ck">
								<text class="texts">本地参考价:<text style="color: red;">100</text>/天</text>
								<text class="worker-distance">距离2.8km</text>
							</view>
							<view class="worker-rates">
								<u-rate :disabled="true" v-model="value" size="23" active-color="rgba(255, 158, 93, 1)"></u-rate>
								<text class="rate-text">5.0分</text>
								<text class="commitmany">10条评论</text>
							</view>
							<!-- <view class="rates-null" v-else>
								<text>暂无评分</text>
							</view> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" class="foot_scroll">
					<view class="ringList">
						<view class="ringitem">
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar src="/static/avatar.jpg" size="100"></u-avatar>
									<text class="username">开发区吴彦祖</text>
								</view>
								<view class="gzbtn">
									<text>关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。</text>
							</view>
							<view class="trendsimages oneimg">
								<image src="/static/img_156.png"></image>
							</view>
							<view class="trendsbtns">
								<view class="btnitem firstbtn">
									<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>87</text>
								</view>
								<view class="btnitem">
									<u-icon name="star" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>125</text>
								</view>
								<view class="btnitem" v-on:click="openTrendscommitsList()">
									<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>125</text>
								</view>
								<view class="btnitem" v-on:click="shareThistrends(0)">
									<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>分享</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '名片'
				}, {
					name: '圈子'
				}],
				current: 0,
				swiperHeight: '',
				value: 5
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.swiperHeight = res.windowHeight - uni.upx2px(80)
				}
			})
		},
		methods: {
			change(e) {
				this.current = e
			},
			swiperChange(e){
				this.current = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.foot_line {
		width: 100%;
		height: 10rpx;
		background-color: #f4f8fb;
	}

	.foot_scroll {
		width: 100%;
		height: 100%;
	}

	.workeritem {
		width: 680rpx;
		height: auto;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		border-bottom: 1rpx solid #F1F1F1;
		margin: auto;
		display: flex;

		image {
			width: 240rpx;
			height: 240rpx;
			border-radius: 10rpx;
		}

		.workitem-right {
			display: flex;
			flex-wrap: wrap;
			flex: 1;
			margin-left: 20rpx;
			align-items: center;
		}

		.workname-info {
			display: flex;
			justify-content: space-between;
			height: auto;
			align-items: center;
			width: 100%;

			.texts {
				font-size: 28rpx;
				color: rgba(34, 34, 34, 1);
			}

			.bzj-tag {
				background-color: rgba(255, 158, 93, 1);
				color: #FFFFFF;
				font-size: 23rpx;
				padding-left: 10rpx;
				padding-right: 10rpx;
				text-align: center;
				padding-top: 8rpx;
				padding-bottom: 8rpx;
				border-radius: 10rpx;
			}
		}

		.workertypes {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
		}

		.workerprice-ck {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.worker-distance {
			color: rgba(136, 136, 136, 1);
			font-size: 25rpx;
		}

		.worker-rates {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
		}

		.rate-text,
		.commitmany {
			font-size: 25rpx;
			color: rgba(136, 136, 136, 1);
			margin-left: 10rpx;
		}

		.rates-null {
			width: 100%;
			height: auto;
			display: flex;
			font-size: 25rpx;
			color: #808080;
		}
	}

	.ringList {
		width: 100%;
		height: 100%;

		.ringitem {
			width: 660rpx;
			margin: auto;
			height: auto;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #F1F1F1;
			padding-top: 30rpx;

			.ring-user {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ring-user-left {
					display: flex;
					height: auto;
					align-items: center;
					flex: 1;
				}

				.username {
					margin-left: 20rpx;
					font-size: 28rpx;
				}

				.gzbtn {
					border: 1rpx solid #ccc;
					padding: 10rpx 15rpx;
					font-size: 27rpx;
					border-radius: 10rpx;
				}

				.ygzbtn {
					background-color: #f4f8fb;
					padding: 10rpx 15rpx;
					font-size: 27rpx;
					border-radius: 10rpx;
					color: #cfd2d4;
				}
			}

			.ring-text {
				width: 100%;
				height: auto;
				font-size: 28rpx;
				color: rgba(34, 34, 34, 1);
				margin-top: 20rpx;

				.ring-text-content {
					width: 100%;
				}
			}

			.trendsimages {
				width: 100%;
				height: auto;
				margin-top: 30upx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.oneimg image {
				width: 300upx;
				height: 500upx;
			}

			.twoimg image {
				width: 335upx;
				height: 250upx;
			}

			.moreimg image {
				width: 220upx;
				height: 235upx;
			}

			.trendsbtns {
				width: 100%;
				margin-top: 30upx;
				display: flex;
				align-items: center;
			}

			.btnitem {
				margin-left: 30upx;
				display: flex;
				align-items: center;

				text {
					margin-left: 10upx;
					color: rgba(136, 136, 136, 1);
				}
			}

			.firstbtn {
				margin-left: 0upx;
			}
		}
	}
</style>
